<template>
  <div class="report-process-act w-full h-full display-flex-column">
    <div
      ref="actProcess"
      class="flex-1 w-full act-process-container"
      :class="`process-model process-model-${modelId}`">
    </div>
    <!--    环节具体接口展示，以及对应的点击事件-->
    <div ref="stageList" class="stage-list-item-content display-flex-column" v-show="selectedStage">
      <span class="stage-list-item-content-trig"></span>
      <div class="stage-list-item-content-list" v-if="selectedStage && selectedStage.details">
        <div
          v-for="(interfaceInfo, detailIndex) in selectedStage.details"
          :key="detailIndex"
          class="stage-list-item-content-title display-flex"
          :class="{'stage-list-item-content-selected':interfaceInfo.id === selectedInterfaceId, 'stage-list-item-content-error': interfaceInfo.state === '调用失败'}"
          @click="handlerDetailClick(interfaceInfo,selectedStage)"
        >
          {{ interfaceInfo.interfaceName }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import actService from '@/api/interfaceMonitorService'
import moment from 'moment'

export default {
  name: 'ProjectInterfaceAct',
  data () {
    return {
      selectedStage:null,
      selectedInterfaceId: 0,
      selectedStageName: '',
      selectedDom:null
    }
  },

  props: {
    modelId: {
      type: String,
      default: () => ''
    },
    stageList: {
      type:Array,
      default: () => []
    }
  },
  watch: {
    stageList: function (newValue, oldValue) {
      this.stageList = newValue;
      if (oldValue.length > 0) {
        this.init()
        this.selectedStage=null
        this.selectedInterfaceId= 0
        this.selectedStageName= ''
        this.selectedDom=null
      }
    }
  },
  computed: {
  },
  mounted () {
    this.init()
  },
  methods: {
    handlerDetailClick (interfaceInfo,stage) {
      if (interfaceInfo.id !== this.selectedInterfaceId) {
        this.selectedInterfaceId = interfaceInfo.id
        this.$emit('handlerSelectAct',interfaceInfo.interfaceDetails,stage)
      }
    },
    //初始化流程的html图：获取到对应的元素，给其设置样式
    async initHtmlModelDiagram () {
      //获取流程图的html格式
      let data = await actService.getHtmlModelDiagram(this.modelId);
      //获取到actProcess元素
      const node = this.$refs.actProcess
      //设置html为获取到的流程图
      node.innerHTML = data
      //获取流程图的对应属性
      const nodeWidth = node.clientWidth
      const processNode = node.childNodes[0]
      const processWidth = processNode.clientWidth
      //图形的比例
      let scale = nodeWidth / processWidth
      if (scale > 1) {
        scale = 1
      }
      const processHeight = processNode.clientHeight * scale
      processNode.setAttribute('style', `min-width:${processWidth}px ;min-height:${processHeight + 10}px ;transform: scale(0.8,0.8);transform-origin: 0 center;`)
      //获取html图中环节的dom
      const taskDoms = node.getElementsByClassName('process-item-UserTask')
      //添加点击事件，并设置样式
      for (let i = 0; i < taskDoms.length; i++) {
        const dom = taskDoms[i]
        const taskInfo = this.getTaskInfoByDom(dom)
        const stageName = taskInfo.stageName
        //找到对应的stage
        const stageInfo = this.stageList.find(item => item.stageName === stageName)
        let taskState = 'process-no-start'
        let taskSelected = 'process-no-start-selected'
        if (stageInfo) {
          const state = stageInfo.state
          //根据state确定环节的状态
          if (state === '调用成功') {
            taskState = 'process-success'
            taskSelected = 'process-success-selected'
          } else if (state === '调用失败') {
            taskState = 'process-fail'
            taskSelected = 'process-fail-selected'
          }
        }
        const nowClass = dom.getAttribute('class')
        dom.setAttribute('class', `${nowClass} ${taskState}`)
        //设置点击事件
        dom.addEventListener('click', (e) => this.handlerTaskDomClick(dom,stageInfo,taskSelected))
      }
      //html图中的箭头的dom
      const arrowDoms = node.getElementsByClassName('process-item-arrow')
      for (let i = 0; i < arrowDoms.length; i++) {
        const dom = arrowDoms[i]
        //设置箭头的样式
        dom.innerHTML = '<i class="iconfont"></i>'
      }
    },
    getTaskInfoByDom (dom) {
      const labels = dom.getElementsByClassName('process-item-label')
      if (labels.length === 1) {
        const label = labels[0]
        return { stageName: label.innerText, sid: dom.getAttribute('sid') }
      } else {
        return {}
      }
    },
    //设置环节的点击事件
    handlerTaskDomClick (dom, stageInfo,taskSelectedClass) {
      const taskInfo = this.getTaskInfoByDom(dom)
      if (this.selectedDom) {
        const oldClass = this.selectedDom.getAttribute('class')
        let nowClass = oldClass.replace('  process-success-selected','').replace('  process-fail-selected','').replace('  process-no-start-selected','')
        this.selectedDom.setAttribute('class', nowClass)
      }
      this.selectedDom = dom
      //设置环节被选中的样式
      if (this.selectedStageName !== taskInfo.stageName) {
        if (stageInfo) {
          this.selectedStage = stageInfo
          //获取流程的位置，给接口调用情况的div设置位置
          const stage = this.$refs.stageList
          //设置位置
          stage.setAttribute('style', `top:${(dom.offsetTop)*0.8 + 75}px;left:${dom.offsetLeft*0.8 + 20}px`)
        }
        this.selectedStageName = taskInfo.stageName
        const nowClass = dom.getAttribute('class')
        dom.setAttribute('class', `${nowClass}  ${taskSelectedClass}`)
      }  else {
        this.selectedStageName = ''
        this.selectedStage = null
      }
    },
    //初始化 加载html图以及 流程的各个元素
    async init () {
      if (!this.modelId) {
        this.$message.error('流程加载失败')
        return
      }
      await this.initHtmlModelDiagram()
    },
  }
}
</script>

<style scoped lang="less">
.report-process-act {
  position: relative;
  overflow: hidden auto;

  /deep/ .act-process-container {
    width: 100%;
    height: 100%;

    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    .container-item {
      position: absolute;
      top: 35%;
      left: 5%;
      transform: translateY(-50%);
      transform-origin: 0 center;
    }

    .process-item-label {
      user-select: none;
      color: #0b2e13;
      font-weight: bold;
      font-size: 14px;
    }

    .process-item-line {
      background: #adadad;
      border: none;
    }

  }

  /deep/ .process-model {
    .process-item-UserTask {
      position: absolute;
      height: 100px;
      color: white;
      border: none;
      border-radius: 100%;
      font-weight: normal;
      overflow: visible !important;
    }

    .process-item-UserTask:after {
      display: none;
    }

    .process-no-start {
      border: 1px solid #a2a2a2;
    }

    .process-success {
      border: 1px solid #a1c68f;
      background-color: #d5e8d4;
    }

    .process-fail {
      border: 1px solid #bf6460;
      background-color: #f8cecc;
    }

    .process-success-selected {
      box-shadow: 0 0 7px 3px #d5e8d4;
    }

    .process-fail-selected {
      box-shadow: 0 0 10px 3px #f8cecc;
    }

    .process-no-start-selected {
      box-shadow: 0 0 10px 3px white;
    }

  }


  .stage-list-item-content {
    position: absolute;
    border-radius: 4%;
    //margin-top: 20px;
    width: 140px;
    justify-content: center;
    align-items: center;

    &-trig {
      //position: relative;
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-bottom-color: white;
      /* 为了照顾兼容性 */
      line-height: 0;
      font-size: 0;
    }
    &-list{
      background-color: white;
      width: 130px;
    }
    &-title {
      text-align: center;
      background-color: rgba(214, 217, 220, 0.4);
      margin: 5px 7px 5px 7px;
      height: 25px;
      cursor: pointer;

      &:hover {
        color: #02a7f0;
      }
    }
    &-selected {
      cursor: auto;
      color: #02a7f0;
      font-weight: bold;
    }

    &-error {
      background-color: #fef0f0;
      color: #f56c6c;
      &:hover {
        color: #f56c6c;
      }
    }
  }

}
</style>
